<template>
  <v-card class="content-bg card mx-auto" :max-width="card.maxWidth" flat tile router :to="`/watch/${video.videoId}`">
    <v-img :src="video.cover" style="height: 160px;"></v-img>
    <v-row no-gutters>
      <v-col cols="2" v-if="card.type != 'noAvatar'">
        <v-list-item class="pl-0 pt-3" router :to="`/channels/${channel}`">
          <v-list-item-avatar>
            <v-img v-if="video.avatar !== 'no-photo.jpg'" class="elevation-6" :src="video.avatar"></v-img>
            <v-avatar v-else color="red">
              <span class="white--text headline ">
                {{ video.nickName.split('')[0].toUpperCase() }}</span>
            </v-avatar>
          </v-list-item-avatar>
        </v-list-item>
      </v-col>
      <v-col>
        <v-card-title class="pl-2 pt-3 subtitle-1 font-weight-bold" style="line-height: 1.2rem">
          {{ video.title }}
        </v-card-title>
        <v-card-subtitle class="pl-2 pb-0">
          {{ video.nickName }}
        </v-card-subtitle>
        <v-card-subtitle class="pl-2 pt-0">
          {{ video.goodCount }} <v-icon :x-small="true" :color="video.isLike?'red':''">mdi-thumb-up</v-icon><v-icon>
            mdi-circle-small</v-icon>{{ dateFormatter(video.createTime) }}
        </v-card-subtitle>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
import moment from "moment";
export default {
  name: "VideoCard",
  props: {
    video: {
      type: Object,
      required: true,
    },
    channel: {
      type: Number,
      required: true,
    },
    card: Object,
  },
  data() {
    return {
      
    };
  },
  methods: {
    dateFormatter(date) {
      return moment(date).locale('zh-cn').fromNow();
    },
  },
};
</script>

<style></style>
